<template>
	<view class="content">
		<view class="top">
			<uni-nav-bar left-icon="back" fixed="true" backgroundColor="url('/webh5/static/topbgye.png')" title="提交订单" color="white"
				@clickLeft="returnBack">
			</uni-nav-bar>
		</view>
		<view class="box">
			<view class="user-box flex" @click="goAddress">
				<view class="xinxi-box" v-if="Object.keys(userData).length==0">
					设置收货地址
				</view>
				<view class="xinxi-box" v-else>
					<view class="name-box">
						<text class="name">{{userData.realName}}</text>
						<text class="phone">{{userData.phone}}</text>
					</view>
					<view class="adress-box" :class="showStatus?'zhedie':''" @click="showStatus=!showStatus" v-if="userData.province">
						{{userData.province}}-{{userData.city}}-{{userData.district}}-{{userData.detail}}</view>
				</view>
				<view class="tubiao">
					<image src="/static/right.png"></image>
				</view>
			</view>
			<view class="shop-box">
				<view class="top-box flex">
					<view class="left">
						<image :src="shopData.image"></image>
					</view>
					<view class="right">
						<view class="title">{{shopData.shopName}}</view>
						<view class="guige">{{shopData.sku}}</view>
					</view>
				</view>
				<view class="feiyong-box flex">
					<text class="left">快递费用</text>
					<text class="right">{{freight==0?'免运费':freight>0?'¥'+freight:freight==-1?'暂不支持发货':''}}</text>
				</view>
				<view class="feiyong-box flex" v-if="paymentType==3">
					<text class="left">购买方式</text>
					<text class="right">奖品提取</text>
				</view>
				<view class="beizhu-box flex">
					<view class="left">备注信息</view>
					<textarea class="right" placeholder="选填备注信息" v-model="remarks"></textarea>
				</view>
				<view class="price-box" v-if="paymentType==1||paymentType==3">
					<text class="left">共{{shopData.shopNumber}}件 合计:</text>
					<text class="right">¥{{shopData.showNewPrice}}</text>
				</view>
				<view class="price-box" v-if="paymentType==2">
					<text class="right">{{shopData.showPrice}}积分</text>
				</view>
			</view>
			<view class="type-box flex" v-if="paymentType==2">
				<text class="text">商城积分</text>
				<view class="right">
					<image src="/static/xuan.png"></image>
				</view>
			</view>
			<view class="type-boxa" v-if="paymentType==1">
				<view class="title">支付方式</view>
				<view class="heng flex" v-for="(item,index) in itemsRadio" :key="index">
					<view class="left flex">
						<image :src="item.image"></image>
						<text class="text">{{item.value}}</text>
					</view>
					<view class="right" @click="goChecked(item.type)">
						<image :src="radioType==item.type?'/static/xuan.png':'/static/weixuan.png'"></image>
					</view>
				</view>
			</view>
			<view class="yaping"></view>
			<view class="btn-box flex">
				<view class="text-box flex">
					<text class="title">共{{shopData.shopNumber}}件 合计:</text>
					<view class="price" v-if="paymentType==1||paymentType==3">
						¥{{shopData.showNewPrice}}
					</view>
					<view class="price" v-if="paymentType==2">
						{{shopData.showPrice}}积分
					</view>
				</view>
				<button class="btn" :disabled="btnStatus" @click="createOrder">提交订单</button>
			</view>
		</view>
		<!--选择运费支付方式 -->
		<uni-popup ref="showIsMakeup" type="bottom" @change="changeIsMakeup" class="pop-box">
			<view class="uni-tip-all">
				<view class="close" @click="closeIsMakeup">
					<button class="btny" hover-class="aada"></button>
				</view>
				<view class="title">运费支付方式</view>
				<view class="isMakeup-box">
					<view class="heng flex" v-for="(item,index) in itemsRadio" :key="index">
						<view class="left flex">
							<image :src="item.image"></image>
							<text class="text">{{item.value}}</text>
						</view>
						<view class="right" @click="goCheckedFreight(item.type)">
							<image :src="freightradio==item.type?'/static/xuan.png':'/static/weixuan.png'"></image>
						</view>
					</view>
				</view>
				<view class="btn-box" @click="submit">确定</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	var _this;
	const app = getApp();
	import {
		isIphone
	} from '@/utils/common.js';
	import uniNavBar from '@/components/uni-nav-bar/uni-nav-bar.vue'
	export default {
		components: {
			uniNavBar
		},
		data() {
			return {
				isIphoneUser: false, //判断是否是苹果
				shopData: {}, //商品信息
				userData: {}, //用户信息
				btnStatus: false,
				showStatus:true,//显示全部地址
				paymentType:0,//2是积分 1是现金 3是盲盒
				itemsRadio: [
					{
						type:1,
						value:'微信支付',
						image:'/static/wx.png'
					},
					{
						type:2,
						value:'支付宝',
						image:'/static/zfb.png'
					}
				],
				radioType:1,//支付方式
				dataUrl:{
					url:"https://game-rfs.3yakj.com/webh5/pages/payEnd/payEnd?runmethod=hidetopbar"
				},//让APP跳转到的指定页面(积分商城结果页)
				datamangheUrl:{
					url:"https://game-rfs.3yakj.com/webh5/pages/payEnd/pickResult?runmethod=hidetopbar"
				},//让APP跳转到的指定页面(盲盒结果页)
				freight:0,//运费
				remarks:'',//备注
				freightradio:1,//运费支付方式
				payTypeString:"",//后端需要的支付方式
				myMoney:0,//自己的积分
			};
		},
		onLoad(options) {
			_this = this;
			_this.isIphoneUser = isIphone();
			uni.removeStorageSync('addressId');
			if(_this.isIphoneUser){
				_this.itemsRadio=[{type:1,value:'微信支付',image:'/static/wx.png'}];
			}
			if(Object.keys(JSON.parse(options.shopData)).length!==0){
				_this.shopData=JSON.parse(options.shopData);
			}
			_this.paymentType=options.type;
			if(options.payType){
				_this.radioType=options.payType;
			}
		},
		onShow() {
			_this.getUserInfo();
			_this.getMoney();
		},
		methods: {
			returnBack() {
				// #ifdef H5
				const pages = getCurrentPages()
				if (pages.length > 1) {
					uni.navigateBack(1)
					return;
				}
				//使用vue-router返回上一级
				let a = this.$router.go(-1)
				if (a == undefined) {
					//重新定向跳转页面
					uni.reLaunch({
						url: "/pages/index/index"
					})
				}
				return;
				// #endif
				uni.navigateBack(1)
			},
			goChecked(type){
				_this.radioType=type;
			},
			goCheckedFreight(type){
				_this.freightradio=type;
			},
			goAddress(){
				uni.navigateTo({
					url: "/pages/address/address?type="+'选择'
				});
			},
			getMoney(){
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreMember/getUserInfo',
					data: {
						"time": Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data) {
						_this.myMoney=res.data.balance;
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getUserInfo() {
				_this.$HTTP({
					method: 'GET',
					url: 'fjUserAddress/getAddress',
					data: {
						"time":Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if (res.data.length>0) {
						if(uni.getStorageSync('addressId')){
							res.data.forEach(item => {
								if(uni.getStorageSync('addressId')==item.id){
									_this.userData = item;
								}
							})
						}
						else{
							_this.userData = res.data[0];
						}
						_this.getSpeci(_this.userData.id);
					}
				}).catch(err => {
					console.log(err)
				})
			},
			getSpeci(id) {
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreOrder/handlePostage',
					data: {
						"addressId":id,
						"productAttrId":_this.shopData.id,
						"number":_this.shopData.shopNumber,
						"time":Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					_this.freight=res.data;
				}).catch(err => {
					console.log(err)
				})
			},
			// 选择运费支付方式弹窗事件
			changeIsMakeup(e) {},
			closeIsMakeup() {
				this.$nextTick(() => {
					this.$refs['showIsMakeup'].close();
				});
			},
			openIsMakeup() {
				this.$nextTick(() => {
					this.$refs['showIsMakeup'].open();
				});
			},
			submit() {
				_this.closeIsMakeup();
				if(_this.paymentType==3){
					if(_this.freight>0){
						if(_this.freightradio==1){
							_this.payTypeString='manghe+weixin';
						}
						else if(_this.freightradio==2){
							_this.payTypeString='manghe+alipay';
						}
					}
					else{
						_this.payTypeString='manghe';
					}
				}
				if(_this.paymentType==2){
					if(_this.freight>0){
						if(_this.freightradio==1){
							_this.payTypeString='yue+weixin';
						}
						else if(_this.freightradio==2){
							_this.payTypeString='yue+alipay';
						}
					}
					else{
						_this.payTypeString='yue';
					}
				}
				if(_this.paymentType==1){
					if(_this.radioType==1){
						_this.payTypeString='weixin';
					}
					else if(_this.radioType==2){
						_this.payTypeString='alipay';
					}
				}
				_this.btnStatus = true;
				_this.$HTTP({
					method: 'POST',
					url: 'fjStoreOrder/createOrder',
					data: {
						"addressId": _this.userData.id,
						"payType": _this.payTypeString,
						"productAttrId": _this.shopData.id,
						"mark": _this.remarks,
						"number": _this.shopData.shopNumber,
						"myBackId": _this.shopData.myBackId,
						"time":Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if(res.data){
						_this.goPay(res.data,_this.payTypeString);
					}
				}).catch(err => {
					console.log(err)
					_this.btnStatus = false;
				})
			},
			createOrder(){
				if(_this.freight==-1){
					_this.$api.msg('该地区暂不支持发货');
					return;
				}
				if(!_this.userData){
					_this.$api.msg('暂无地址~');
					return;
				}
				if(_this.paymentType==2){
					if(_this.myMoney<_this.shopData.showPrice){
						_this.$api.msg('积分不足哦！');
						return;
					}
				}
				if((_this.paymentType==2||_this.paymentType==3)&&_this.freight>0){
					_this.openIsMakeup();
				}
				else{
					_this.submit();
				}
			},
			// 支付接口
			goPay(orderid,type){
				_this.$HTTP({
					method: 'GET',
					url: 'fjStoreOrder/pay',
					data: {
						"orderId": orderid,
						"time":Date.parse(new Date())
					},
					// header:'form' 
				}).then(res => {
					if(res.data){
						// 是苹果环境
						if(_this.isIphoneUser){
							_this.btnStatus = false;
							if(type=='weixin'||type.indexOf("weixin") != -1){
								if(_this.paymentType==3){
									window["webkit"].messageHandlers.paysgopage.postMessage(_this.datamangheUrl)
								}
								else{
									window["webkit"].messageHandlers.paysgopage.postMessage(_this.dataUrl)
								}
								var urla='wap.3yakj.com://';
								var url=encodeURIComponent(urla);
								var tiaozhuan=res.data.result.jsConfig.mweb_url + "&redirect_url=" + url;
								 window.location.replace(tiaozhuan);
							}
							// 苹果的支付宝方式，因为苹果那边说支付宝下了就没用
							// if(type=='alipay'||type.indexOf("alipay") != -1){
							// 	// window.webkit.messageHandlers.paysgopage.postMessage(_this.dataUrl);
							// 	window["webkit"].messageHandlers.paysgopage.postMessage(_this.dataUrl)
							// 	let div = document.createElement("div");
							// 	div.innerHTML = res.data.result.jsConfig.mweb_url;
							// 	document.body.appendChild(div);
							// 	document.forms[0].submit();
							// 	setTimeout(() => {
							// 	    document.body.removeChild(div);
							// 	}, 2000);
							// }
						}
						// 是安卓环境
						else{
							var newTextUrl={};
							if(_this.paymentType==3){
								newTextUrl=_this.datamangheUrl;
							}
							else{
								newTextUrl=_this.dataUrl;
							}
							let text = JSON.stringify(newTextUrl);
							window["liveapp"].paySuccessGoPage(text);
							_this.btnStatus = false;
							if(type=='weixin'||type.indexOf("weixin") != -1){
								 window.location.replace(res.data.result.jsConfig.mweb_url);
							}
							if(type=='alipay'||type.indexOf("alipay") != -1){
								let div = document.createElement("div");
								div.innerHTML = res.data.result.jsConfig.mweb_url;
								document.body.appendChild(div);
								document.forms[0].submit();
								setTimeout(() => {
								    document.body.removeChild(div);
								}, 2000);
							}
						}
					}
					else{
						_this.btnStatus = false;
						if(_this.paymentType==3){
							uni.reLaunch({
								url: '/pages/payEnd/pickResult'
							});
						}
						else{
							uni.reLaunch({
								url: '/pages/payEnd/payEnd'
							});
						}
					}
				}).catch(err => {
					console.log(err)
					_this.btnStatus = false;
				})
			},
		}
	}
</script>
<style lang="less">
	page {
		width: 100%;
		background: #eaeaec;
	}
</style>
<style scoped lang="less">
	.top {
		width: 100%;
	}
	.zhedie{
		overflow: hidden;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
	}
	// 所有弹窗样式
	.uni-tip-all {
		width: 100%;
		height: 330rpx;
		box-sizing: border-box;
		padding: 20rpx;
		overflow: hidden;
		position: relative;
		z-index: 10;
		background: white;
		.close {
			position: absolute;
			right: 39rpx;
			top: 20rpx;
		
			.btny {
				width: 35rpx;
				height: 35rpx;
				background: url('~@/static/close.png');
				background-size: 100% 100%;
			}
		}
		.title{
			width: 100%;
			font-size: 32rpx;
			text-align: center;
		}
		// 是否补领弹窗样式
		.isMakeup-box {
			width: 100%;
			margin-top: 20rpx;
			.heng:last-child{
				border: none;
			}
			.heng{
				width: 100%;
				box-sizing: border-box;
				padding: 25rpx;
				justify-content: space-between;
				align-items: center;
				.left{
					align-items: center;
					image{
						width: 30rpx;
						height: 30rpx;
					}
					.text{
						font-size: 28rpx;
						font-family: SimHei;
						font-weight: 400;
						color: #000000;
						margin-left: 15rpx;
					}
				}
				.right{
					width: 40rpx;
					height: 40rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
		}
		.btn-box{
			width: 100%;
			height: 60rpx;
			line-height: 60rpx;
			background: #FFB633;
			text-align: center;
			font-size: 26rpx;
			color: white;
			position: absolute;
			bottom: 0;
			left: 0;
		}
	}

	.content {
		width: 100%;

		.box {
			width: 100%;

			.user-box {
				width: 100%;
				min-height: 140rpx;
				box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
				background: #FFFFFF;
				border-radius: 10rpx;
				box-sizing: border-box;
				padding: 36rpx 26rpx 24rpx 34rpx;
				align-items: center;
				justify-content: space-between;

				.tubiao {
					width: 17rpx;
					height: 32rpx;
					image {
						width: 17rpx;
						height: 32rpx;
					}
				}

				.xinxi-box {
					width: 100%;
					font-size: 28rpx;
					font-weight: 400;
					color: #000000;
					.name-box {
						width: 100%;

						.name {
							font-size: 28rpx;
							font-weight: 400;
							color: #000000;
						}

						.phone {
							font-size: 28rpx;
							font-weight: 400;
							color: #000000;
							margin-left: 30rpx;
						}
					}

					.adress-box {
						width: 100%;
						font-size: 28rpx;
						font-weight: 400;
						color: #000000;
						margin-top: 15rpx;
					}
				}
			}

			.shop-box {
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0px 0px 6rpx 0px rgba(0, 0, 0, 0.1);
				margin-top: 18rpx;
				box-sizing: border-box;
				padding: 20rpx 25rpx 30rpx 25rpx;
				.top-box{
					width: 100%;
					align-items: center;
					justify-content: space-between;
					.left{
						width: 130rpx;
						height: 130rpx;
						image{
							width: 130rpx;
							height: 130rpx;
							border-radius: 10rpx;
						}
					}
					.right{
						width: 100%;
						margin-left: 15rpx;
						.title{
							width: 100%;
							font-size: 28rpx;
							font-weight: bold;
							color: #000000;
							overflow: hidden;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
						}
						.guige{
							width: 100%;
							font-size: 25rpx;
							font-weight: 400;
							color: #868585;
							margin-top: 35rpx;
							margin-left: 30rpx;
						}
					}
				}
				.feiyong-box{
					width: 100%;
					align-items: center;
					justify-content: space-between;
					margin-top: 60rpx;
					.left{
						font-size: 25rpx;
						font-weight: bold;
						color: #000000;
					}
					.right{
						font-size: 25rpx;
						font-weight: 400;
						color: #868585;
					}
				}
				.beizhu-box{
					width: 100%;
					margin-top: 60rpx;
					align-items: flex-start;
					justify-content: space-between;
					.left{
						width: 180rpx;
						font-size: 25rpx;
						font-weight: bold;
						color: #000000;
					}
					.right{
						width: 100%;
						height: 100rpx;
						font-size: 25rpx;
					}
				}
				.price-box{
					width: 100%;
					margin-top: 20rpx;
					text-align: right;
					.left{
						font-size: 24rpx;
						color: #000000;
					}
					.right{
						font-size: 28rpx;
						color: #FF5D5D;
						margin-left: 15rpx;
					}
				}
			}
			.type-box{
				width: 100%;
				height: 100rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
				margin-top: 20rpx;
				margin-bottom: 150rpx;
				box-sizing: border-box;
				padding: 0 25rpx;
				align-items: center;
				justify-content: space-between;
				.text{
					font-size: 28rpx;
					color: #000000;
					font-weight: bold;
				}
				.right{
					width: 40rpx;
					height: 40rpx;
					image{
						width: 40rpx;
						height: 40rpx;
					}
				}
			}
			.type-boxa{
				width: 100%;
				background: #FFFFFF;
				box-shadow: 0rpx 0rpx 6rpx 0rpx rgba(0, 0, 0, 0.1);
				margin-top: 20rpx;
				margin-bottom: 150rpx;
				.title{
					width: 100%;
					font-size: 28rpx;
					font-weight: bold;
					color: #000000;
					box-sizing: border-box;
					padding: 30rpx 25rpx 0rpx 25rpx;
				}
				.heng:last-child{
					border: none;
				}
				.heng{
					width: 100%;
					box-sizing: border-box;
					padding: 37rpx 25rpx 37rpx 25rpx;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1rpx solid #D1D1D1;
					.left{
						align-items: center;
						image{
							width: 30rpx;
							height: 30rpx;
						}
						.text{
							font-size: 28rpx;
							font-family: SimHei;
							font-weight: 400;
							color: #000000;
							margin-left: 15rpx;
						}
					}
					.right{
						width: 40rpx;
						height: 40rpx;
						image{
							width: 40rpx;
							height: 40rpx;
						}
					}
				}
			}
			.yaping{
				width: 100%;
				height: 200rpx;
			}
			.btn-box {
				width: 100%;
				height: 100rpx;
				box-sizing: border-box;
				padding: 0 26rpx 0 0;
				position: fixed;
				bottom: 0;
				left: 0;
				align-items: center;
				justify-content: flex-end;
				background: #FFFFFF;
				.text-box{
					align-items: center;
					.title{
						font-weight: 400;
						font-size: 24rpx;
						color: #B1B1B1;
					}
					.price{
						font-size: 28rpx;
						font-weight: bold;
						color: #FF5D5D;
						margin-left: 20rpx;
					}
				}
				.btn {
					line-height: 60rpx;
					font-size: 25rpx;
					color: #FFFFFF;
					width: 180rpx;
					height: 60rpx;
					background: linear-gradient(90deg, #41B9FF 0%, #A87EFF 100%);
					border-radius: 30rpx;
					margin-left: 20rpx;
				}
			}
		}
	}
</style>
